<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>部门机构</title>
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
<link rel="stylesheet"
	href="/three/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
</head>
<body class="pos-r">
	<form action="/three/dept/list" method="post" id="form1">
		<div class="pos-a"
			style="width: 200px; left: 0; top: 0; bottom: 0; height: 100%; border-right: 1px solid #e5e5e5; background-color: #f5f5f5; overflow: auto;">
			<ul id="tree" class="ztree"></ul>
		</div>
		<div style="margin-left: 200px;">
			<div class="page-container">
				<div class="text-c">
					<input type="text" name="dname" placeholder=" 部门名称"
						style="width: 250px" class="input-text">
					<c:if test="${fn:contains(power,'dept/list') }">
						<button type="submit" class="btn btn-primary">
							<i class="Hui-iconfont">&#xe665;</i>查询
						</button>
					</c:if>
					<button class="btn btn-primary" type="button" id="btn_reset">
						<i class="Hui-iconfont">&#xe68f;</i>重置
					</button>
				</div>
				<c:if test="${fn:contains(power,'dept/save') }">
					<div class="cl pd-5 bg-1 bk-gray mt-20">
						<span class="l">
							<button class="btn btn-primary" id="btn_add" type="button">
								<i class="Hui-iconfont">&#xe600;</i>组织机构新增
							</button>
						</span>
					</div>
				</c:if>
				<div class="mt-20">
					<table
						class="table table-border table-bordered table-bg table-hover table-sort">
						<thead>
							<tr class="text-c">
								<th>组织名称</th>
								<th>机构代码</th>
								<th>主要负责人</th>
								<th>电话</th>
								<th>传真</th>
								<th>自动展开</th>
								<th>排序号</th>
								<th>节点图标</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${deptList }" var="dept">
								<tr class="text-c va-m">
									<td>${dept.deptName }</td>
									<td>${dept.deptCode }</td>
									<td>${dept.manager }</td>
									<td>${dept.phone }</td>
									<td>${dept.fax }</td>
									<td>${dept.isAutoExpand==1?"是":"否" }</td>
									<td>${dept.sortNo }</td>
									<td>${dept.iconName }</td>
									<td>${dept.remark }</td>
									<td class="td-manage"><c:if
											test="${fn:contains(power,'dept/update') }">
											<c:if test="${dept.parentId=='-1' }">
												<a style="text-decoration: none"
													onclick='toupdate(${el:toJsonString(dept)})' title="编辑"><i
													class="Hui-iconfont">&#xe6df;</i></a>
											</c:if>
										</c:if> <c:if test="${dept.parentId!='-1'}">
											<c:if test="${fn:contains(power,'dept/update') }">
												<a style="text-decoration: none"
													onclick='toupdate(${el:toJsonString(dept)})' title="编辑"><i
													class="Hui-iconfont">&#xe6df;</i></a>
											</c:if>
											<c:if test="${fn:contains(power,'dept/move') }">
												<a class="ml-5" style="text-decoration: none"
													onclick="dept_move('${dept.deptId}')" title="移动机构"><i
													class="Hui-iconfont">&#xe63c;</i></a>
											</c:if>
											<c:if test="${fn:contains(power,'dept/delete') }">
												<a style="text-decoration: none" class="ml-5"
													href="/three/dept/delete?deptId=${dept.deptId }" title="删除"><i
													class="Hui-iconfont">&#xe6e2;</i></a>
											</c:if>
										</c:if></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div id="treeModal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">移动机构</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="deptIds" id="deptIds" value=""
							class="input-text" /> <input type="hidden" name="parentIds"
							id="parentIds" value="" class="input-text" />
						<ul id="deptDemo" class="ztree"></ul>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_move">确定</button>
						<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</form>
	<form action="" method="post" id="deptform">
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">部门机构更新</h3>
						<a class="close" id="btn_gb" data-dismiss="modal"
							aria-hidden="true" href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="deptId" id="deptId" class="input-text" />
						<table class="table table-border">
							<tr>
								<td>机构名称</td>
								<td><input type="text" name="deptName"
									class="input-text radius" value="" /></td>
								<td>上级机构</td>
								<td>
									<div class="input-group" style="width: 190px;">
										<input id="citySel" class="btn disabled radius" type="text"
											style="width: 165px;" />
										<div style="float: right; margin-top: 4px;"
											onclick="showMenu();">选择</div>
									</div> <input id="treeids" type="hidden" name="parentId"
									class="input-text">
									<div id="menuContent" class="menuContent"
										style="display: none; position: absolute;">
										<ul id="treeDemo" class="ztree"></ul>
									</div>
								</td>
							</tr>
							<tr>
								<td>机构代码</td>
								<td><input type="text" name="deptCode"
									class="input-text radius" value="" /></td>
								<td>主要负责人</td>
								<td><input type="text" name="manager"
									class="input-text radius" value="" /></td>
							</tr>
							<tr>
								<td>电话</td>
								<td><input type="text" name="phone"
									class="input-text radius" value="" /></td>
								<td>传真</td>
								<td><input type="text" name="fax" class="input-text radius"
									value="" /></td>
							</tr>
							<tr>
								<td>地址</td>
								<td><input type="text" name="address"
									class="input-text radius" value="" /></td>
								<td>节点图标</td>
								<td><input type="text" name="iconName"
									class="input-text radius" value="" /></td>
							</tr>
							<tr>
								<td>排序号</td>
								<td>
									<div style="width: 190px;">
										<div id="subtraction" style="float: left; margin-top: 5px;">
											<i class="Hui-iconfont">&#xe6a1;</i>
										</div>
										<input type="text" class="btn disabled radius" id="number"
											name="sortNo" value="1" style="width: 165px;">
										<div id="add" style="float: right; margin-top: 5px;">
											<i class="Hui-iconfont">&#xe600;</i>
										</div>
									</div>
								</td>
								<td>自动展开</td>
								<td><select name="isAutoExpand" class="input-text radius"
									style="width: 195px;">
										<option value="1">是</option>
										<option value="0">否</option>
								</select></td>
							</tr>
							<tr>
								<td>备注</td>
								<td colspan="3"><textarea name="remark" rows="5" cols="65"
										class="textarea radius"></textarea></td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_save">保存</button>
						<button class="btn" id="btn_close" data-dismiss="modal"
							aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</form>
</body>
<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="/three/static/formEdit.js"></script>
<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript"
	src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript"
	src="/three/lib/zTree/v3/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript"
	src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript"
	src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript"
	src="/three/lib/zTree/v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript"
	src="/three/lib/zTree/v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
$('.table-sort').dataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"pading":false,
	"aoColumnDefs": [
	  {"orderable":false,"aTargets":[0,8]}// 不参与排序的列
	]
});
$("#deptform").validate({
	rules:{
		deptName:{
			required:true,
			minlength:4,
			maxlength:16
		},
		citySel:{
			required:true,
		}
	},
	onkeyup:false,
	focusCleanup:true
});
	$.ajax({
		type : 'POST',
		dataType : "json",
		url : "/three/dept/tooDept", 
		async : false,
		success : function(data) {
			var setting = {
				data : {
					simpleData : {
						enable : true,
						idKey : "deptId",
						pIdKey : "parentId",
						rootPId : 0
					},
					key : {
						name : "deptName",
					}
				},
				callback: {
					onClick: ztreeOnclick
				}
			}
			$(document).ready(function() {
				$.fn.zTree.init($("#tree"), setting, data);
				expandAll(); //调用写好的展开全部节点方法
			});
			var zNodes = data;
		}
	});
	function ztreeOnclick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("tree"), nodes = zTree
				.getSelectedNodes(), ids = "";
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for (var i = 0, l = nodes.length; i < l; i++) {
			ids += nodes[i].deptId + ","; //获取选中的菜单树的id

		}
		// 将选中的id放到隐藏的文本域中
		if (ids.length > 0)
			ids = ids.substring(0, ids.length - 1);
		$("#form1").attr("action","/three/dept/queryDeptIds?ids=" + ids);
		$("#form1").submit();
	}
	/* 完成ztree的自动展开功能开始 */
	var curStatus = "init", curAsyncCount = 0, asyncForAll = false, goAsync = false;

	function expandAll() {

		var zTree = $.fn.zTree.getZTreeObj("tree");
		if (asyncForAll) {

			zTree.expandAll(true);
		} else {
			expandNodes(zTree.getNodes());
			if (!goAsync) {
				curStatus = "";
			}
		}
	}

	function expandNodes(nodes) {
		if (!nodes)
			return;
		curStatus = "expand";
		var zTree = $.fn.zTree.getZTreeObj("tree");
		for (var i = 0, l = nodes.length; i < l; i++) {
			zTree.expandNode(nodes[i], true, false, false);
			if (nodes[i].isParent && nodes[i].zAsync) {
				expandNodes(nodes[i].children);
			} else {
				goAsync = true;
			}
		}
	}
	/* 完成ztree的自动展开功能结束 */

	$("#btn_add").click(function() {
		$("#myModal").modal("show");
	});

	/*加号的方法开始*/
	$("#add").click(function() {
		var add = document.getElementById("add");
		var number = document.getElementById("number");
		//parseInt() 将数值型字符串转换为数值
		number.value = parseInt(number.value) + 1;
	});
	/*加号的方法结束*/

	/*减号的方法*/
	$("#subtraction").click(function() {
		//获取-号按钮
		var subtraction = document.getElementById("subtraction");
		//获取文本框
		var number = document.getElementById("number");
		if (number.value <= 1) {
			//如果文本框的值小于1,则设置值为1
			number.value = 1;
		} else {
			number.value = number.value - 1;
		}

	});
	/*减号的方法结束*/

	/*文本框焦点失去事件*/
	$("#number").click(function() {
		var number = document.getElementById("number");
		var value = number.value;
		//如果文本值为空,设置为1
		if (value == "") {
			number.value = 1;
		}
		//如果文本值为非纯数字,设置为1
		//isNaN()是否为非法数字
		if (isNaN(value)) {
			number.value = 1;
		}
		//如果文本值小于1,设置为1
		if (parseInt(value) <= 1) {
			number.value = 1;
		}

	});

	/*下拉菜单开始*/
	$.ajax({
		type : 'POST',
		dataType : "json",
		url : "/three/dept/tooDept", //请求的action路径  
		async : false,
		success : function(data) {
			var inputsetting = {
				data : {
					simpleData : {
						enable : true,
						idKey : "deptId",
						pIdKey : "parentId",
						rootPId : 0
					},
					key : {
						name : "deptName",
					}
				},
				callback : {
					onClick : onClick
				}
			}
			$(document).ready(function() {
				$.fn.zTree.init($("#treeDemo"), inputsetting, data);

			});
		}
	});

	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
				.getSelectedNodes(), v = "";
		ids = "";
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for (var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].deptName + ",";
			ids += nodes[i].deptId + ",";
		}
		if (v.length > 0)
			v = v.substring(0, v.length - 1);
		$("#citySel").val(v);
		// 将选中的id放到隐藏的文本域中
		if (ids.length > 0)
			ids = ids.substring(0, ids.length - 1);
		$("#treeids").val(ids);
	}

	function showMenu() {
		$("#citySel").val("");
		var cityObj = $("#citySel");
		var cityOffset = $("#citySel").offset();

		$("#menuContent").css({
			left : "370px",
			top : "55px"
		}).slideDown("fast");
		$("body").bind("mousedown", onBodyDown);
	}

	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}

	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(
				event.target).parents("#menuContent").length > 0)) {
			hideMenu();
		}
	}
	/*	下拉菜单结束*/

	/*获取树节点id开始*/
	function deptClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("deptDemo"), nodes = zTree
				.getSelectedNodes(), ids = "";
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for (var i = 0, l = nodes.length; i < l; i++) {
			ids += nodes[i].deptId + ",";
		}
		// 将选中的id放到隐藏的文本域中
		if (ids.length > 0)
			ids = ids.substring(0, ids.length - 1);
		$("#parentIds").val(ids);
	}
	/*获取树节点id结束*/

	/*移动机构*/
	function dept_move(deptId) {
		$("#deptIds").val(deptId);
		/*移动机构的树形菜单开始*/
		$.ajax({
			type : 'POST',
			dataType : "json",
			url : "/three/dept/tooDept", //请求的action路径  
			async : false,
			success : function(data) {
				var setting = {
					data : {
						simpleData : {
							enable : true,
							idKey : "deptId",
							pIdKey : "parentId",
							rootPId : 0
						},
						key : {
							name : "deptName",
						}
					},
					callback : {
						onClick : deptClick
					}
				}
				$(document).ready(function() {
					$.fn.zTree.init($("#deptDemo"), setting, data);
				});
				var zNodes = data;
			}

		});
		/*移动机构的树形菜单结束*/
		$("#treeModal").modal("show");
	}
	/*点击组织移动的保存按钮开始*/
	$("#btn_move").click(
			function() {
				var deptIdsValue = $("#deptIds").val();
				var parentIdsValue = $("#parentIds").val();
				if (deptIdsValue == parentIdsValue || parentIdsValue == null
						|| parentIdsValue == "") {
					alert("该组织不能这样移动！！！");
				} else {
					$("#form1").attr("action", "/three/dept/travelMechanism");
					$("#form1").submit();
				}
			});
	/*点击组织机构的保存按钮结束*/
	/* 点击保存以后操作开始 */
	$("#btn_save").click(
			function() {
				var deptValue = $("#deptId").val();
				var parentvalue = $("#treeids").val();
				if (deptValue == null || deptValue == "") {
					if (parentvalue == null || parentvalue == "") {
						alert("请选择组织机构！！！");
					} else {
						$("#deptform").attr("action", "/three/dept/save");
						$("#deptform").submit();
					}

				} else {
					if (deptValue == "0") {
						if (parentvalue != "-1" || parentvalue != null) {
							alert("组织机构有误！！！");
						}
					} else {
						//console.log(parentvalue + "--" + deptValue);
						if (parentvalue == deptValue || parentvalue == null
								|| parentvalue == "") {
							alert("组织机构有误！！！");
						} else {
							$("#deptform").attr("action", "/three/dept/update");
							$("#deptform").submit();
						}
					}
				}
			});
	/* 点击保存以后结束 */
	/*点击重置按钮开始*/
	$("#btn_reset").click(function() {
		$("#dname").val("");
	});
	/*点击重置按钮结束*/
	/*点击关闭和close清空数据开始*/
	$("#btn_gb,#btn_close").click(function() {
		$(".input-text").val("");
		$(".textarea").val("");
		$("#number").val("1");
	});
	/*点击关闭和清空数据结束*/
	
	/*修改*/
	function toupdate(dept) {
		$(".input-text").val("");
		$(".textarea").val("");
		$("#number").val("1");
		$.ajax({
			type : "POST",
			url : "/three/dept/toselectParentname",
			dataType : "text",
			async : false,
			data : {
				parentId : dept.parentId
			},
			success : function(obj) {
				$("#citySel").val(obj);
				$("#deptform").formEdit(dept);
				$("#myModal").modal("show");
			}
		});
	}
	/*修改结束*/
</script>
</html>